<template>
    <!-- 百度地图 -->
    <div class="center-body">
        <!-- <div class="map" id="map">aaa</div> -->
        <baidu-map class="map" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" :mapStyle="mapStyle">
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <!-- <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation> -->
            <!-- 标记点 -->
            <!-- <bm-marker :position="center" @click="showInfoWindow"></bm-marker> -->
            <!-- 使用markers数组渲染自定义标记点 -->
            <bm-marker v-for="(marker, index) in markers" :key="index" :position="{ lng: marker.lng, lat: marker.lat }"
                :icon="marker.icon">
            </bm-marker>
            <!-- 信息窗口 -->
            <bm-info-window :position="center" :show="showWindow" @close="showWindow = false">
                <p>当前位置信息aaa</p>
            </bm-info-window>
        </baidu-map>
    </div>
</template>

<script>
export default {
    name: 'MapPart',
    props: {
    },
    data() {
        return {
            center: {
                lng: 117.029,
                lat: 25.086
            },
            zoom: 13,
            showWindow: false,
            mapStyle: {
                style: 'normal',
                styleJson: [
                    {
                        "featureType": "all",
                        "elementType": "all",
                        "stylers": {
                            "color": "#1a1a2e",      // 整体背景深色
                            "gamma": 1.4,            // 对比度
                            "lightness": -40         // 亮度
                        }
                    },
                    {
                        "featureType": "road",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#12223dff"       // 道路颜色
                        }
                    },
                    {
                        "featureType": "label",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "administrative",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "poi",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                ]
            },
            markers: [
                {
                    lng: 117.029,
                    lat: 25.099,
                    label: '点1',
                    icon: {
                        url: require('@/assets/image/2(1).png'),
                        size: { width: 32, height: 32 },
                        opts: {
                            anchor: { width: 16, height: 32 },

                        }
                    }
                },
                {
                    lng: 117.029,
                    lat: 25.080,
                    label: '点2',
                    icon: {
                        url: require('@/assets/image/2(1).png'),
                        size: { width: 32, height: 32 },
                        opts: {
                            anchor: { width: 16, height: 32 },
                            imageSize: { width: 32, height: 32 }
                        }
                    }
                }
            ]
        }
    },
    mounted() {
        // console.log("BMap: ", BMap)
    },
    methods: {
    },
}
</script>

<style scoped>
.center-body {
    width: 54%;
    height: 100%;
    margin: 0 0.3%;
    float: left;
    /*border: 1px solid red;*/
}

.center-body .map {
    width: 100%;
    height: 100%;
}

/* 隐藏百度地图左下角的Logo */
.center-body .map :deep(.anchorBL) {
    display: none !important;
}

/* 或者使用更通用的选择器 */
.center-body .map :deep([class*="anchorBL"]) {
    display: none !important;
}

/* 隐藏百度地图版权信息 */
.center-body .map :deep(.BMap_cpyCtrl) {
    display: none !important;
}

/* 隐藏百度地图缩放控件中的版权信息 */
.center-body .map :deep(.BMap_scaleCtrl) {
    display: none !important;
}
</style>